<template>
  <div >
<!--    文章标题-->
    <div style="margin: 20px 0">
      <div style="font-size: 20px;color: #409EFF;cursor: pointer">{{article.name}}</div>
      <div style="font-size: 14px;margin-top: 4px;color: #8c939d">
        <i class="el-icon-user-solid"><span>{{article.user}}</span></i>
        <i class="el-icon-time" style="margin-left: 10px"><span>{{article.time}}</span></i>
      </div>
    </div>

    <!--    文章预览-->
    <div style="margin: 20px 0">
      <mavon-editor
          class="md"
          :value="article.content"
          :subfield="false"
          :default-open="'preview'"
          :toolbars-flag="false"
          :editable="false"
          :scroll-style="true"
          :ishljs="true"
      />
    </div>

<!--    文章评论-->
    <div style="margin: 20px 0">
      <div style="border-bottom: 1px solid orangered;font-size: 20px ">评论</div>
      <div style="padding: 10px 0">
        <el-input type="textarea" v-model="commentForm.content"></el-input>
      </div>
      <div style="margin: 10px 0;text-align: right">
        <el-button type="primary" size="small" @click="save">发布</el-button>
      </div>
    </div>

<!--    评论列表-->
    <div>
<!--      每楼-->
      <div v-for="item in comments" :key="item.id" >
<!--        楼主-->
        <div style="border-bottom: 1px solid #cccccc;padding: 10px 0;display: flex">
          <!--        头像-->
          <div >
            <el-image :src="item.avatarUrl" style="width: 50px;height: 50px;border-radius: 50%;"></el-image>
          </div>
          <!--        内容-->
          <div style="flex: 1;font-size: 14px;line-height: 25px">
            <b>{{item.realName}}: </b>
            <span>{{ item.content }} </span>
            <div style="display: flex;padding-top: 8px">
              <div>
                <i class="el-icon-time"></i><span style="margin-left: 5px">{{item.time}}</span>
              </div>
              <div style="text-align: right;flex: 1">
                <el-button type="text" @click="replay(item)">回复</el-button>
                <el-button type="text" style="color: red" v-if="user.id===item.userId" @click="del(item.id)">删除</el-button>
              </div>
            </div>
          </div>
        </div>
<!--        回复-->
        <div v-if="item.children.length" style="padding-left: 50px;background: aliceblue;">
          <div v-for="subItem in item.children" :key="subItem.id" style="display: flex;margin: 10px 0">
            <!--        头像-->
            <div >
              <el-image :src="subItem.avatarUrl" style="width: 50px;height: 50px;border-radius: 50%;"></el-image>
            </div>
            <!--        内容-->
            <div style="flex: 1;font-size: 14px;line-height: 25px">
              <b>{{subItem.realName}} 回复 @{{subItem.pname}}: </b>
              <span>{{ subItem.content }} </span>
              <div style="display: flex;padding-top: 8px">
                <div>
                  <i class="el-icon-time"></i><span style="margin-left: 5px">{{subItem.time}}</span>
                </div>
                <div style="text-align: right;flex: 1">
                  <el-button type="text" @click="replay(subItem)">回复</el-button>
                  <el-button type="text" style="color: red" v-if="user.id===subItem.userId" @click="del(subItem.id)">删除</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
<!--  回复评论话框-->
    <el-dialog title="回复信息" :visible.sync="dialogFormVisible" top="50px" width="30%">
      <el-form label-width="80px" size="small">
        <el-form-item label="回复内容" >
          <el-input type="textarea" v-model="commentForm.replayContent" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item >
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>

</template>

<script>
import axios from "axios";

export default {
  name: "User",
  data(){
    return{
      dialogFormVisible:false,
      commentForm:{},
      replayForm:{},
      comments:[],//其他人的评论
      article:{},//文章对象
      user:localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")):{}
    }
  },
  created() {
    this.load()
    this.loadComment()
  },
  methods: {
    load(){
      this.request.get("/article/"+this.$route.query.id).then(res=>{
        this.article=res.data
      })

    },
    loadComment(){
      this.request.get("/comment/tree/"+this.$route.query.id).then(res=>{
        this.comments=res.data
        console.log(res.data)
      })
    },
    save(){
      if(!this.user){
        this.$message.warning("请登录后评论")
      }
      this.commentForm.articleId=this.$route.query.id
      if(this.commentForm.replayContent){
        this.commentForm.content=this.commentForm.replayContent
      }
      this.commentForm.userId=this.user.id
      this.request.post("/comment",this.commentForm).then(res=>{
        if(res.code==='200'){
          this.$message.success("评论成功")
          this.loadComment()
          this.commentForm={}
          this.dialogFormVisible=false
        }else{
          this.$message.error("评论失败")
          console.log(res)
        }
      })
    },
    del(id){
      this.request.delete("/comment/"+id).then(res=>{
        if(res.code==='200'){
          this.$message.success("删除成功")
          this.loadComment()
        }else{
          this.$message.error("删除失败")
        }
      })
    },
    cancel(){
      this.dialogFormVisible=false;
    },
    replay(item){//回复该条评论，可能是楼主，也可能是该楼其他评论
      this.commentForm={pid:item.id}
      if(!item.pid){//回复楼主
        this.commentForm.originId=item.id
      }else{
        this.commentForm.originId=item.originId
      }
      this.dialogFormVisible=true
    }
  }
}
</script>

<style scoped>

</style>